<template>
    <div>
        <a-alert message="个人社会关系补充" type="info" style="margin-bottom:20px;"/>
        <a-table
            ref="table"
            size="default"
            rowKey="key"
            :columns="columns"
            :loading="loading"
            :dataSource="data"
            :pagination="false"
            :scroll="{ x: 1500 }"
        >
        <template v-for="col in ['xm', 'ybrgx', 'lxdh','gzdw']" :slot="col" slot-scope="text, record">
        <div :key="col">
            <a-input
            v-if="!disabledStop"
            style="margin: -5px 0"
            :value="text"
            @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>{{text}}</template>
        </div>
        </template>
        <template slot="action" slot-scope="text,record">
          <a @click="handleDelete(record.key)">删除</a>
        </template>
        </a-table>
         <a-button type="primary" @click="handleAdd" block style="margin-top:20px;" v-if="!disabledStop">新增行</a-button>
    </div>
</template>

<script>
import { STable } from '~'

export default {
  components: {
    STable
  },
  props: {
    confirmHandleVisiable: {
      default: false
    },
    info: {
      default: () => []
    },
    // 是否禁止编辑
    disabledStop: {
      default: true
    }
  },
  data () {
    return {
      loading: false,
      data: [],
      columns: [
        {
          title: '姓名',
          dataIndex: 'xm',
          scopedSlots: { customRender: 'xm' }
        },
        {
          title: '与本人关系',
          dataIndex: 'ybrgx',
          scopedSlots: { customRender: 'ybrgx' }
        },
        {
          title: '联系电话',
          dataIndex: 'lxdh',
          scopedSlots: { customRender: 'lxdh' }
        },
        {
          title: '工作单位/职务',
          dataIndex: 'gzdw',
          scopedSlots: { customRender: 'gzdw' }
        }
      ]
    }
  },
  created () {
    if (!this.disabledStop) {
      this.columns.push({
        title: '操作',
        dataIndex: 'cz',
        fixed: 'right',
        width: 120,
        scopedSlots: { customRender: 'action' }
      })
    }
    this.data = this.info
  },
  methods: {
    // 新增行
    handleAdd () {
      this.data.push({
        xm: '',
        ybrgx: '',
        lxdh: '',
        gzdw: '',
        key: Math.random().toString(26).substring(2)
      })
    },
    // 关闭
    onClose () {
      this.$emit('close')
    },
    // 输出数据
    GetInfo () {
      return this.data
    },
    handleChange (value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    // 删除
    handleDelete (key) {
      const dataSource = [...this.data]
      this.data = dataSource.filter(item => item.key !== key)
    }
  }
}
</script>

<style lang="less">
.fullscreen{
    .ant-drawer-wrapper-body{
        height: 100%;
        overflow: auto;
    }
}
</style>
